<!-- 实时行情点评 -->
<template>
  <div>
    <template v-if="info.have_permission">
      <div class="reviews">
        <!-- table遮罩 -->
        <div class="table-loading" v-if="loadingLock"></div>
        <div v-if="welfareList.length > 0">
          <div class="reviews-container">
            <reviewsRow
              :spDate="true"
              :reviews="item"
              :info="info"
              v-for="(item, index) in welfareList"
              :key="index"
            ></reviewsRow>
          </div>
          <div class="reviews-detail">
            <div class="gradual"></div>
            <div class="reviews-more" @click="goDetails">
              <span>查看更多</span> <i class="icon-more-normal"></i>
            </div>
          </div>
        </div>
        <div v-else class="reload">
          <div class="logo-no-data">
            <img src="../../assets/images/nodata.png" alt="" />
          </div>
          <div>内容加载失败</div>
          <div class="reload-button" @click="requery">点击刷新</div>
        </div>
      </div>
    </template>
    <!-- 未购买状态 -->
    <div v-else class="skeleton">
      <div class="buy-lock" @click="goPay">
        <div class="icon-lock mr-8"></div>
        <div>{{ `立即解锁${info.product_name}体系` }}</div>
      </div>
      <img src="../../assets/images/word-home-skeleton.png" alt="" />
    </div>
  </div>
</template>

<script>
import query from '@/lib/query.js';
import reviewsRow from '../ReviewsRowHome.vue';
export default {
  name: 'Welfare',
  components: { reviewsRow },
  data() {
    return {
      loadingLock: true,
      welfareList: [],
    };
  },
  created() {
    if (this.info.have_permission) {
      this.queryList();
    }
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    requery() {
      // 点击重新查询
      this.queryList();
    },
    goDetails() {
      // 跳转直播列表
      const param = {
        themId: this.info.theme_id,
      };
      this.$router.push({ path: 'wordLiveList', query: param });
    },
    goPay() {
      // 跳转常规支付
      window.statConf.click('textlive.unlock');
      const url = `${_Global.url.payIndex}?sid=${this.info.sid}`;
      window.location.href = url;
    },
    queryList() {
      const param = {
        page_num: 1,
        // 首页固定两条
        page_size: 2,
        theme_id: this.info.theme_id,
      };
      query
        .getWordLiveList(param)
        .then(res => {
          this.loadingLock = false;
          const { list } = res.data;
          this.formatData(list);
        })
        .catch(err => {
          this.loadingLock = false;
          this.catchErrHandler(err);
        });
    },
    formatData(data) {
      // 主要为了格式化图片数据
      const welfareList = [];
      for (let i = 0; i < data.length; i++) {
        const row = data[i];
        const link = _t.jsonPase(row.link);
        if (link && link.length) {
          row.img = link;
        }
        welfareList.push(row);
      }
      this.welfareList = welfareList;
    },
  },
};
</script>

<style lang="less" scoped>
.reload {
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo-no-data {
    width: 2.4rem;
    height: 2.4rem;
    margin-top: 0.6rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .reload-button {
    margin-top: 0.1rem;
    padding: 0.08rem 0.2rem;
    border-radius: 0.08rem;
    background: #ff2436;
    line-height: 1;
    font-size: 0.24rem;
    color: white;
  }
}
.reviews {
  min-height: 6rem;
}
.reviews-container {
  padding: 0 0.2rem;
  position: relative;
  max-height: 6rem;
  overflow: hidden;
}
.reviews-detail {
  position: absolute;
  width: 7.5rem;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  .gradual {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 100%);
    height: 0.48rem;
    width: 100%;
  }
  .reviews-more {
    height: 0.92rem;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      height: 0.92rem;
      font-size: 0.24rem;
      color: rgba(0, 0, 0, 0.4);
      line-height: 0.92rem;
      margin-right: 0.04rem;
    }
  }
}
.skeleton {
  width: 100%;
  position: relative;
  min-height: 5.84rem;
  margin-top: 0.16rem;
  img {
    width: 100%;
  }
}
</style>
